//地图格
var TILE_WIDTH = 80;
var TILE_HEIGHT = 60;
var TILE_SLIDE_WIDTH = TILE_WIDTH/2;
var TILE_SLIDE_HEIGHT = TILE_HEIGHT/2;
var Map = function( field, cols, rows, left, top ){
	//设置场景
	field.width( cols*TILE_SLIDE_WIDTH+TILE_SLIDE_WIDTH );
	field.height( rows*TILE_SLIDE_HEIGHT+TILE_SLIDE_HEIGHT );
	field.left( left );
	field.top( top );
	//地图格图案
	var tiles = [ ];
	loop( cols, function( col ){
		loop( rows, function( row ){
			if(( row+col )%2==0){
				tiles.push( Box( field, {
					left: col*TILE_SLIDE_WIDTH,
					top: row*TILE_SLIDE_HEIGHT,
					width: TILE_WIDTH,
					height: TILE_HEIGHT,
					background_image: "url(img/tile/none.png)"
				} ) );
			}
		} );
	} );
	//鼠标事件
	var click = empty;
	var mouseover = empty;
	var mouseout = empty;
	var mousemove = empty;
	//由鼠标分析出逻辑坐标
	var lastX = -1;
	var lastY = -1;
	//坐标转换层
	var transitLayer = field.area( {
		left: 0,
		top: 0,
		width: field.offsetWidth( ),
		height: field.offsetHeight( ),
		onClick: function( e ){
			//触发所在逻辑格的点击事件
			if(lastX>=0&&lastY>=0&&lastX<cols&&lastY<rows){
				click( lastX, lastY );
			}
		},
		onMousemove: function( e ){
			//计算出终点逻辑格
			var SEG_WIDTH = 2*TILE_SLIDE_WIDTH;
			var SEG_HEIGHT = 2*TILE_SLIDE_HEIGHT;
			var x = Math.floor( e.offsetX/SEG_WIDTH );
			var y = Math.floor( e.offsetY/SEG_HEIGHT );
			var segX = TILE_SLIDE_HEIGHT*( e.offsetX%SEG_WIDTH );
			var segY = TILE_SLIDE_WIDTH*( e.offsetY%SEG_HEIGHT );
			var segXY = TILE_SLIDE_WIDTH*TILE_SLIDE_HEIGHT;
			//线性规划
			if(segX+segY<segXY){
				x = 2*x-1;
				y = 2*y-1;
			}
			else if(segX-segY<-segXY){
				x = 2*x-1;
				y = 2*y+1;
			}
			else if(segX-segY>segXY){
				x = 2*x+1;
				y = 2*y-1;
			}
			else if(segX+segY>segXY*3){
				x = 2*x+1;
				y = 2*y+1;
			}
			else{
				x = 2*x;
				y = 2*y;
			}
			//逻辑格间移动
			if(x!=lastX||y!=lastY){
				if(lastX>=0&&lastY>=0&&lastX<cols&&lastY<rows){
					mouseout( lastX, lastY );
				}
				if(x>=0&&y>=0&&x<cols&&y<rows){
					mouseover( x, y );
				}
				lastX = x;
				lastY = y;
			}
			//逻辑格内移动
			else{
				if(x>=0&&y>=0&&x<cols&&y<rows){
					mousemove( x, y );
				}
			}
		}
	} );

	return {
		//判断块是否存在
		has: function( x, y ){
			return x>=0&&y>=0&&x<cols&&y<rows&&( x+y )%2==0;
		},
		//一块地图格变换颜色
		setTile: function( x, y, color ){
			tiles[Math.floor( ( x*rows+y )/2 )].background_image( "url(img/tile/"+color+".png)" );
		},
		//地图鼠标事件
		onClick: function( h ){
			click = h;
		},
		onMouseover: function( h ){
			mouseover = h;
		},
		onMouseout: function( h ){
			mouseout = h;
		},
		onMousemove: function( h ){
			mousemove = h;
		},
		//清理
		remove: function( ){
			foreach( tiles, function( t ){
				t.remove( );
			} );
			transitLayer.remove( );
		}
	};
};

//一簇地图格
var Cluster = function( rangeGenerator, targetGenerator ){
	return function( rangeColor, targetColor ){
		return function( map, center, onSelect ){
			var range = [ ];
			foreach( rangeGenerator( center ), function( r ){
				if(map.has( r.x, r.y )){
					range.push( r );
					map.setTile( r.x, r.y, rangeColor );
				}
			} );
			var target = [ ];
			map.onMouseover( function( x, y ){
				target = [ ];
				foreach( targetGenerator( center, {
					x: x,
					y: y
				} ), function( t ){
					if(map.has( t.x, t.y )){
						target.push( t );
						map.setTile( t.x, t.y, targetColor );
					}
				} );
			} );
			map.onMouseout( function( x, y ){
				foreach( target, function( t ){
					map.setTile( t.x, t.y, rangeColor );
				} );
				target = [ ];
			} );
			map.onClick( function( x, y ){
				if(target.length>0){
					onSelect( target );
				}
			} );
			return {
				remove: function( ){
					foreach( range, function( r ){
						map.setTile( r.x, r.y, "none" );
					} );
					range = [];
					target = [];
					map.onMouseover( empty );
					map.onMouseout( empty );
					map.onClick( empty );
				}
			};
		};
	};
};

var distance = function( from, to ){
	var distX = Math.abs( from.x-to.x );
	var distY = Math.abs( from.y-to.y );
	return distX>distY? distX : distY;
};

var circle = function( radius ){
	return function( center ){
		var rst = [ ];
		var row, col;
		for(row = -radius; row<=radius; row++){
			for(col = -radius; col<=radius; col++){
				if(( row+col )%2==0){
					rst.push( {
						x: center.x+row,
						y: center.y+col
					} );
				}
			}
		}
		return rst;
	};
};

var RangeCluster = function( d ){
	return Cluster( circle( d ), function( center, target ){
		return distance( center, target )<=d? [target]:[];
	} );
};

//火球动画
var FireBall = function( area, from, to, zIndex ){
	//图片参数
	var WIDTH = [ 200, 200, 200, 100, 100 ];
	var HEIGHT = [ 200, 200, 200, 100, 100 ];
	var IMAGE = [ "fireball1.png", "fireball2.png", "fireball2.png", "fireball4.png", "fireball3.png" ];
	//运行时间
	var TIME = 20;
	//位置波动
	//设置图片
	var cores = [ ];
	loop( 5, function( i ){
		cores.push( Box( area, {
			left: from.x-WIDTH[i]/2,
			top: from.y-HEIGHT[i]/2,
			width: WIDTH[i],
			height: HEIGHT[i],
			zIndex: zIndex+( from.y<to.y? -i : i ),
			background_image: "url(img/effect/"+IMAGE[i]+")"
		} ) );
		cores[i].visible( false );
	} );
	//轨迹框架
	var trace = parabola( from, to, TIME, 2 );
	//遥控器
	return {
		play: function( playlist, callback ){
			var count = 0;
			var queue = Timer( function( ){
				//总共5个球
				if(count>4){
					queue.stop( );
					return;
				}
				//取当前值
				var i = count;
				//显示一个球
				cores[i].visible( true );
				//调整路径
				var path = [ ];
				loop( TIME, function( t ){
					path.push( {
						x: trace[t].x-WIDTH[i]/2,
						y: trace[t].y-HEIGHT[i]/2
					} );
				} );
				//播放动画
				playlist.play( 50, Motion( function( pos ){
					cores[i].left( pos.x );
					cores[i].top( pos.y );
				}, path ), function( ){
					//保留第一个球到最后
					if(i!=0){
						cores[i].remove( );
						cores[i] = null;
					}
					//最后
					if(i==4){
						cores[0].remove( );
						cores[0] = null;
						callback( );
					}
				} );
				//步进
				count = count+1;
			}, 50 );
			//开始
			queue.start( );
		},
		remove: function( ){
			loop( 5, function( i ){
				if(cores[i]!=null){
					cores[i].remove( );
					cores[i] = null;
				}
			} );
		}
	};
};

var FireBallRange = RangeCluster( 5 )( "purple", "red" );